<template>
  <a-form ref="editRef" autocomplete="off" :model="record_edit">
    <template v-for="item in sheet || {}" :key="item.nodename">
      <TagNode
        :model="record_edit"
        :node="item"
        :form-info="formInfo"
        @change="onChange"
      />
    </template>
  </a-form>
</template>

<script setup>
import TagNode from '../ONode/TagNode.vue'

import { useSubForm } from './subFormApi.js'

import { computed } from 'vue'

const props = defineProps([
  'readonly',
  'record',
  'values',
  'node',
  'parentInfo'
])
const emit = defineEmits(['row-change'])

const { formview, sheet } = useSubForm(props)

const record_edit = computed({
  get() {
    return props.record
  },
  set(val) {
    console.log(val)
    //
  }
})

const formInfo = computed(() => {
  if (!formview.value) {
    return {}
  }

  // console.log(sheet)
  const view = formview.value
  const info = {
    model: view.model,
    metadata: view.metadata,
    record: props.record,
    record_readonly: props.record,
    values: props.values,
    editable: !props.readonly
  }
  return { ...info }
})

function onChange(fname, value) {
  emit('row-change', fname, value)
}
</script>

<style scoped></style>
